<template>
	<view>
		<view>
			<!--单独的一个list，for循环产生 start-->
			<view class="choose-my-public">

				<view class="list-one-by-one" v-for="(item,index) in UserPuzzleList" :key="index"
				v-if="item.puzzleStatus === (current - 1) || current===0"
				>

					<!-- <div v-if="item.puzzleStatus === (current - 1)"> -->


						<view class="puzzle-title">
							<text class="id">{{item.id}}.</text>
							<text>-{{item.puzzleName}}-</text>
							<text class="type">{{computedPuzzleType(item.puzzleType)}}</text>

						</view>
						<view class="tag-all">

							<!--修改和删除的标签的button-->
							<uni-section title="空心标签" subTitle="使用 inverted 属性显示空心表签" type="line" padding>
								<view class="example-body tag-so">
									<!--星星展示的区域start-->
									<view class="stars-show-container ">
										<uni-icons type="star-filled" size="40" color="red" v-for=" n in item.star"
											:key="n"></uni-icons>
										<uni-icons type="star" size="40" color="red" v-for=" n in (5-item.star)"
											:key="n"></uni-icons>
										
										
									</view>
									<!--星星展示的区域end-->
									<!--时间序列化start-->
									<view class="list-time-show">
										{{formatUpdateTime(item.updateTime)}}
									</view>
									<!--时间序列化end-->
									<view class="tag-view">
										<uni-tag :inverted="true" text="修改" type="primary"
											@click="unitag_change(item.id)">
										</uni-tag>
									</view>
									<view class="tag-view">
										<uni-tag :inverted="true" text="删除" type="error"
											@click="unitag_delete(item.id)" />
									</view>
								</view>
							</uni-section>



						</view>
					<!-- </div>
					<div v-else></div> -->
				</view>
				<view v-else></view>

			</view>
			<!--单独的一个list，for循环产生end-->

		</view>


	</view>
</template>

<script>
	export default {
		props: {
			UserPuzzleList: {
				type: Array,
				default: []
			},
			current: {
				//0全部，，1未审核，2审核

				type: Number,
				default: 0,
			},
			type: {
				type: Number,
				default: 0, //0id顺序，1时间顺序，2星级顺序
			}
		},

		data() {
			return {
				copyArray: [],
			}
		},
		mounted() {


		},
		created() {

		},
		watch: {
			type(newV, oldV) {
				this.changeShowTypeOrder(); //，改变展示的内容的顺序
			},
			current(newV, oldV) {

				//this.changeShowType(); //，改变展示的内容的顺序
			}
		},
		methods: {
			changeShowType() {
				// 先对原始数据进行深层复制，避免直接修改 this.UserPuzzleList
				const copiedArray = JSON.parse(JSON.stringify(this.copyArray));

				// 根据条件筛选数据
				let filteredPuzzles = [];
				if (this.current === 1) {
					filteredPuzzles = copiedArray.filter(puzzle => puzzle.puzzleStatus === 0);
				} else if (this.current === 2) {
					filteredPuzzles = copiedArray.filter(puzzle => puzzle.puzzleStatus === 1);
				}

				// 更新 UserPuzzleList
				this.$set(this, 'UserPuzzleList', filteredPuzzles);
			},
			//被监听的函数，改变展示的内容的顺序
			changeShowTypeOrder() {
				//1时间顺序，2星级顺序,0原始

				if (this.type === 1) {
					this.UserPuzzleList = this.UserPuzzleList.map(obj => obj).sort((a, b) => {
						// 将 createTime 转换为 Date 对象
						const createTimeA = new Date(a.createTime[0], a.createTime[1] - 1, a.createTime[2], a
							.createTime[3], a.createTime[4], a.createTime[5]);
						const createTimeB = new Date(b.createTime[0], b.createTime[1] - 1, b.createTime[2], b
							.createTime[3], b.createTime[4], b.createTime[5]);
						// 比较 createTime
						return createTimeB - createTimeA;
					});
				} else if (this.type === 2) {
					console.log("this.type===2")
					this.UserPuzzleList = this.UserPuzzleList.map(obj => obj).sort((a, b) => b.star - a.star);
				} else {
					this.UserPuzzleList = this.UserPuzzleList.map(obj => obj).sort((a, b) => b.id - a.id);
				}
			},
			//页面展示时候判断是什么类型的谜题
			computedPuzzleType(type) {
				//0填空，1多选，2单选，3判断
				switch (type) {
					case 0:
						return '填空';
						break;
					case 1:
						return '多选';
						break;
					case 2:
						return '单选';
						break;
					case 3:
						return '判断';
						break;
				}
			},
			//将时间字符串化start
			formatUpdateTime(updateTime) {
				const date = new Date(updateTime[0], updateTime[1] - 1, updateTime[2])

				//const options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' };
				return date.toLocaleDateString('en-US');

				//return date.toISOString();

			},
			unitag_change(id) {
				this.$emit('unitag_change', id);
			},
			unitag_delete(id) {
				this.$emit('unitag_delete', id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		position: relative;
	}

	.btn-add-new-container {

		position: fixed;
		left: 50%;
		transform: translateX(-50%);

		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: auto;
	}

	.btn-add-new {
		width: 300rpx;
		color: white;
		background-color: #007AFF;
		border-radius: 20%;
		font-weight: bold;
		bottom: 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.stars-show-container {
		position: absolute;
		box-sizing: border-box;

		display: flex;
		justify-content: center;
		left: -220rpx;
		flex: 1;
	}

	.fenduanqi-all {
		padding-top: 30rpx;
		height: 100%;
		width: 90%;
		margin: auto;
		box-sizing: border-box;

	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
		align-items: center;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		justify-content: flex-start;
		align-items: center;
		height: 90%;
		width: 100%;

		text-align: center;

	}



	.list-time-show {
		flex: 3;
		width: 200rpx;
	}

	.title-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tag-view {
		flex: 2;
		width: 120rpx;
		box-sizing: border-box;

	}

	.btn-view {
		height: 100rpx;
	}

	.tag-so {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between
	}

	.puzzle-title {
		flex: 2;
		align-items: center;
		display: flex;
		margin-left: 10rpx;
		justify-content: center;
		position: relative;

		.id {
			position: absolute;
			left: 20rpx;

		}

		.type {
			position: absolute;
			right: 40rpx;
			background-color: rgb(240, 221, 221);
			border-radius: 20rpx;

			width: 100rpx;
			height: 45rpx;
			box-shadow: 3rpx 3rpx 3rpx 3rpx black;

		}
	}

	.tag-all {
		box-sizing: border-box;

		padding: 20rpx;
		justify-content: flex-end;
		flex: 1;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.choose-my-public {
		padding-top: 20rpx;
		margin: auto;
		margin-top: 30rpx;
		width: 100%;
		position: relative;

	}

	.list-one-by-one {
		display: flex;
		flex-direction: column;
		height: 200rpx;
		width: 700rpx;
		border-radius: 20rpx;
		margin: auto;
		margin: 20rpx;
		box-sizing: border-box;
		background-color: white;
	}

	.add-test-btn {
		margin-top: 20rpx;
		margin-right: 10rpx;
		color: white;
		background-color: #da2929;
		font-weight: bold;
		font-size: 25rpx;
		width: 180rpx;
		border-radius: 25%;
		float: right;

		transition: transform 0.00002s;
	}

	.add-test-btn:active {
		transform: translateY(0.0001rpx);
	}
</style>